<template>
    <div class="active" v-if="showCom">
        <h1>{{title}}</h1>
        <div>  
        <slot></slot>
    </div>
    </div>
</template>
<script>
export default {
    props: {
        showCom: {
            typeof: String
        },
        title:{
            typeof:String
        }
    },
    data() {
        return {

        }
    },
    created() {
    },
    computed: {
    },
    methods: {
    }
}
</script>
<style lang='less'  scoped>
.active {
    width: 500px;
    height: 300px;
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: scroll;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
</style>
